<html>

<head>
    <meta charset="UTF-8">
    <title>流程图</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"
          name="viewport"/>
    <link href="/plugin/layui/css/layui.css" rel="stylesheet">
    <link href="/plugin/ztree/css/metroStyle/metroStyle.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
    <script charset="utf-8" src="/plugin/layui/layui.all.js" type="text/javascript"></script>
    <script charset="utf-8" src="/plugin/tools/tool.js" type="text/javascript"></script>
</head>
<style>
    .tab-2 {
        margin-left: 40%
    }
</style>
<body>
<div class="x-body">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">流程图</li>
            <li>流程审批</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div id="image" style="width:100%;height:100%;overflow: auto;">
                    <div class="layui-form-item">
                        <image id="showImages1" style="display: none;"></image>
                        <image id="showImages2"></image>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item tab-2">
                <ul class="layui-timeline">

                </ul>
            </div>
        </div>

    </div>
    <script>
        var countNum = 0;
        layui.use(['form', 'layer', 'element'], function () {
            $ = layui.jquery;
            layer.load(1);
            $.getJSON('${re.contextPath}/act/getShineProcImage?processInstanceId=${processInstanceId}', function (json) {
                let result = json.images;
                let task = json.taskSqu;
                if (typeof task !== 'undefined') {
                    showTask(task);
                }
                let imgObj1 = document.getElementById("showImages1")
                imgObj1.src = "data:image/png;base64," + result[0];
                let imgObj2 = document.getElementById("showImages2")
                imgObj2.src = "data:image/png;base64," + result[1];
                window.setInterval(function () {
                    if (countNum === 0) {
                        $("#showImages1").show();
                        $("#showImages2").hide();
                    } else {
                        $("#showImages1").hide();
                        $("#showImages2").show();
                    }
                    countNum++;
                    if (countNum === 2) {
                        countNum = 0;
                    }
                }, 1000);
                layer.closeAll('loading');
            });

        });

        function showTask(task) {
            let msg = ``;
            for (let i = 0; i < task.length; i++) {
                let t = task[i];
                msg += `<li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <br/>
                        <i class="layui-icon layui-timeline-axis">&#xe61a;</i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">`;
                msg += t.taskName;
                msg += `</h3>
                            <p>
                                <br>审批人：`;
                if (t.userName !== null) {
                    msg += t.userName;
                }
                msg += `<br>审批组：`;
                if (t.groupNames) {
                    t.groupNames.forEach(function (v, index) {
                        msg += v;
                        msg += (index === t.groupNames.length - 1 ? '' : '/');
                    });
                }
                msg += `
                                <br>审批时间：`;
                if (t.time !== null) {
                    msg += t.time;
                }
                msg += `
                            </p>
                        </div>
                    </li>`
            }
            let line = document.getElementsByClassName('layui-timeline')[0];
            line.innerHTML = msg;
        }
    </script>
</body>


</html>
